<template>
  <div class="cop-list">
    <div class="header">
      <AppHeader>
        <div class="title">更多企业</div>
        <template slot="right">
          <a href="">下载</a>
          <a href="">搜索</a>
          <a href="">筛选</a>
        </template>
      </AppHeader>
    </div>
    <div class="main">
      <div class="summery">符合条件的企业有 {{ total }} 家</div>

      <div class="list-item">
        <div class="hd">
          <div class="col1">房号</div>
          <div class="col2">公司信息</div>
          <div class="col3">操作</div>
        </div>
        <div class="bd">
          <InfinityList :service="infinityList">
            <template v-for="item in items">
              <router-link
                :key="item.id"
                class="con-item mark"
                :to="{
                  name: 'Company',
                  params: { id: item.id }
                }"
              >
                <div class="col1">{{ getRoomNo(item) }}</div>
                <div class="col2">
                  <div class="name">{{ item.name }}</div>
                  <p class="info">
                    退租日期：
                    {{
                      item.enterpriseIncubatorVO &&
                        item.enterpriseIncubatorVO.cancellingDate
                    }}
                  </p>
                  <p class="info">法人代表：{{ item.operName }}</p>
                  <p class="info">注册资本：{{ item.registCapi }}</p>
                  <p class="info">成立日期：{{ item.startDate }}</p>
                  <p v-if="item.noteList.length" class="tags">
                    <span v-for="tag in item.noteList" :key="tag">
                      {{ tag }}
                    </span>
                  </p>
                </div>
                <div class="col3"><a href="" class="ico-tag"></a></div>
              </router-link>
            </template>
          </InfinityList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import InfinityList from "../components/InfinityList";
import { useInfinityList } from "../use/useInfinityList";
import { getRoomNo } from "../utils/format";

export default {
  name: "Collection",
  components: { InfinityList },

  setup() {
    const infinityList = useInfinityList("cedar-system/usercollection/page", {
      method: "get",
      data: {}
    });

    const { items, total } = infinityList;

    return {
      infinityList,
      items,
      total,
      getRoomNo
    };
  }
};
</script>
